<template>
  <div class="app-container">
    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

      <el-col :span="6">
        <el-form-item label="客户名称:" prop="customerName">
          <el-input v-model="queryParams.customerName" clearable placeholder="请输入客户名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="业务类型:" prop="businessType">
          <el-select v-model="queryParams.businessType" clearable>
            <el-option v-for="dict in dict.type.business_type" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="客户类型:" prop="customerType">
          <el-select v-model="queryParams.customerType" clearable>
            <el-option v-for="dict in dict.type.customer_type" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="租赁用途:" prop="leasePurpose">
          <el-select v-model="queryParams.leasePurpose" clearable>
            <el-option v-for="dict in dict.type.rental_purpose" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="客户标签:" prop="customerSource">
          <el-select v-model="queryParams.customerSource" clearable>
            <el-option v-for="dict in dict.type.customer_label" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="客户等级:" prop="customerLevel">
          <el-select v-model="queryParams.customerLevel" clearable>
            <el-option v-for="dict in dict.type.customer_level" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="客户属性:" prop="clientProperty">
          <el-select v-model="queryParams.clientProperty" clearable>
            <el-option v-for="dict in dict.type.customer_property" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

<!--      <el-col :span="6">-->
<!--        <el-form-item label="通过台数状态:" prop="passStatus" label-width="130px">-->
<!--          <el-select v-model="queryParams.passStatus" clearable>-->
<!--            <el-option label="生效中" :value="1"></el-option>-->
<!--            <el-option label="已过期" :value="2"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </el-col>-->

      <el-col :span="6">
        <el-form-item label="提交人:" prop="submitter">
          <el-input v-model="queryParams.submitter" clearable placeholder="请输入提交人"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="价审通过时间:">
          <el-date-picker v-model="priceTimes" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                          @change="changePriceTimes"></el-date-picker>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="是否老客户:" prop="areYouALoyalCustomer">
          <el-select v-model="queryParams.areYouALoyalCustomer" clearable>
            <el-option v-for="dict in dict.type.business_yes_no" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="线索来源:" prop="clueClassification">
          <el-select v-model="queryParams.clueClassification" placeholder="请选择线索来源" clearable>
            <el-option v-for="dict in dict.type.clues_source" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="额度申请编号:" prop="orderNo">
          <el-input v-model="queryParams.orderNo" clearable placeholder="请输入额度申请编号"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="信审申请编号:" prop="applicationNo">
          <el-input v-model="queryParams.applicationNo" clearable placeholder="请输入信审申请编号"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="车辆信息:" prop="carInfo">
          <el-input v-model="queryParams.carInfo" clearable placeholder="请输入车辆厂商/车型/款型"></el-input>
        </el-form-item>
      </el-col>
    </SearchContent>

    <div class="card-wrap paddingAll20" :model="queryParams" label-width="86px">
      <div class="table-title-wrap flex-row-center-sb">
        <div class="flex-row-center">
          <p class="statisticsInfo">
            <span>免信审总数:</span>
            <span class="countInfo">{{ statisticsInfo.noCreditTotal || 0 }}</span>
          </p>
          <p class="statisticsInfo">
            <span>免信审总台数:</span>
            <span class="countInfo">{{ statisticsInfo.noCreditTotalTower || 0 }}</span>
          </p>
          <p class="statisticsInfo">
            <span>免信审总金额:</span>
            <span class="countInfo">{{ format_thousand(statisticsInfo.applicationsTotalOfAmount) || 0 }}</span>
          </p>
        </div>
        <el-button type="primary" size="mini" @click="handleExport"
                   v-hasPermi="['letterReview:noCredit:export']">导出
        </el-button>
      </div>

      <el-table
          v-loading="loading"
          :data="dataList"
          :span-method="arraySpanMethod"
          :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
        <el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width" fixed="left">
          <template v-slot="{row}">
            <e-button v-hasPermi="['letterReview:noCredit:detail']" size="mini" type="text" @click="handleOperate(11,row)"
            >查看
            </e-button>
            <e-button v-hasPermi="['letterReview:noCredit:voidRemindCredit']" v-if="row.displayVoid" size="mini" type="text" @click="handleOperate(12,row)"
            >作废剩余额度
            </e-button>
          </template>
        </el-table-column>

        <!-- 普通列插槽 -->
        <el-table-column label="序号" type="index" align="center" prop="ruleName" min-width="120px" show-overflow-tooltip fixed="left"/>
        <el-table-column label="信审申请编号" align="center" prop="applicationNo" min-width="180px" show-overflow-tooltip fixed="left">
          <template v-slot="{row}">
            <e-button class="enable-text-select" v-hasPermi="['letterReview:noCredit:detail']" size="mini" type="text" @click="handleOperate(11,row)"
            >
              {{ row.applicationNo }}
            </e-button>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center" prop="customerName" min-width="120px" show-overflow-tooltip fixed="left"/>
        <el-table-column label="业务类型" align="center" prop="businessType" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="dict.type.business_type" :value="row.businessType"/>
          </template>
        </el-table-column>
        <el-table-column label="产品方案" align="center" prop="planName" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="申请类型" align="center" prop="applicationType" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="车牌号" align="center" prop="carNo" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="车辆类型" align="center" prop="vehicleModel" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="车辆款型" align="center" prop="vehicleStyle" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="新车采购单价" align="center" prop="purchasePrice" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            {{format_thousand(row.purchasePrice)}}
          </template>
        </el-table-column>
        <el-table-column label="旧车当前估值" align="center" prop="currentValuation" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            {{format_thousand(row.currentValuation)}}
          </template>
        </el-table-column>
        <el-table-column label="新车采购总额" align="center" prop="newCarProcurementAmount" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            {{format_thousand(row.newCarProcurementAmount)}}
          </template>
        </el-table-column>
        <el-table-column label="旧车当前估值总额" align="center" prop="oldCarValuationAmount" min-width="140px" show-overflow-tooltip>
          <template v-slot="{row}">
            {{format_thousand(row.oldCarValuationAmount)}}
          </template>
        </el-table-column>
        <el-table-column label="租赁用途" align="center" prop="leasePurpose" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="dict.type.rental_purpose" :value="row.leasePurpose"/>
          </template>
        </el-table-column>
        <el-table-column label="租赁期限" align="center" prop="leaseTerm" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="保证金" align="center" prop="margin" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            {{format_thousand(row.margin)}}
          </template>
        </el-table-column>
        <el-table-column label="每期租金" align="center" prop="monthlyRent" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            {{format_thousand(row.monthlyRent)}}
          </template>
        </el-table-column>
        <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRentalRatio" min-width="150px" show-overflow-tooltip>
          <template v-slot="{row}">
            <template v-if="row.firstInstallmentRentalRatio">
              {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
            </template>
            <template v-else>
              -- 、--
            </template>
          </template>
        </el-table-column>
        <el-table-column label="残值、比例" align="center" prop="residualValueRatio" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <template v-if="row.residualValueRatio">
              {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
            </template>
            <template v-else>
              -- 、--
            </template>
          </template>
        </el-table-column>
        <el-table-column label="租金支付方式" align="center" prop="rentPaymentMethod" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="申请总台数" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="信审中总台数" align="center" prop="totalCringNumber" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="通过总台数" align="center" prop="totalPassNumber" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="拒绝总台数" align="center" prop="totalRejectNumber" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="不予准入总台数" align="center" prop="totalNotAdmittedNumber" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="撤单总台数" align="center" prop="totalCancelNumber" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="申请台数" align="center" prop="numberOfApplications" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="通过台数" align="center" prop="numberOfUnitsPassed" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="拒绝台数" align="center" prop="rejectedUnits" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="已使用台数" align="center" prop="numberOfUnitsUsed" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="作废台数" align="center" prop="numberOfInvalidUnits" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="冻结台数" align="center" prop="numberOfFrozenUnits" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="剩余可使用台数" align="center" prop="numberOfRemainingUnits" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <span>{{ row.numberOfUnitsPassed - row.numberOfUnitsUsed - row.numberOfInvalidUnits - row.numberOfFrozenUnits }}</span>
          </template>
        </el-table-column>
        <el-table-column label="通过台数状态" align="center" prop="effectiveStatus" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <span>{{ row.effectiveStatus|effectiveStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="通过台数到期时间" align="center" prop="creditReviewDeadline" min-width="140px" show-overflow-tooltip/>
        <el-table-column label="客户编号" align="center" prop="customerCode" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="客户类型" align="center" prop="customerType" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="dict.type.customer_type" :value="row.customerType"/>
          </template>
        </el-table-column>
        <el-table-column label="客户标签" align="center" prop="customerSource" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="dict.type.customer_label" :value="row.customerSource"/>
          </template>
        </el-table-column>
        <el-table-column label="客户等级" align="center" prop="customerLevel" min-width="100px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="dict.type.customer_level" :value="row.customerLevel"/>
          </template>
        </el-table-column>
        <el-table-column label="客户属性" align="center" prop="clientProperty" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="dict.type.customer_property" :value="row.clientProperty"/>
          </template>
        </el-table-column>
        <el-table-column label="是否是老客户" align="center" prop="areYouALoyalCustomer" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="dict.type.business_yes_no" :value="row.areYouALoyalCustomer"/>
          </template>
        </el-table-column>
        <el-table-column label="线索来源" align="center" prop="clueClassification" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="dict.type.clues_source" :value="row.clueClassification"/>
          </template>
        </el-table-column>
        <el-table-column label="车辆厂商" align="center" prop="vehicleManufacturers" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="车辆能源类型" align="center" prop="vehicleEnergyType" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="登记性质" align="center" prop="registrationNature" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="里程限制(公里)" align="center" prop="mileageLimit" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="上牌城市" align="center" prop="registeredCity" min-width="120px" show-overflow-tooltip/>

        <el-table-column label="额度申请编号" align="center" prop="orderNo" min-width="180px" show-overflow-tooltip>
          <template v-slot="{row}">
            <e-button class="enable-text-select" size="mini" type="text" @click="goQurtaApplyDetail(row)">
              {{ row.orderNo }}
            </e-button>
          </template>
        </el-table-column>
        <el-table-column label="价审通过时间" align="center" prop="priceReviewTime" min-width="140px" show-overflow-tooltip/>
        <el-table-column label="提交人" align="center" prop="submitter" min-width="120px" show-overflow-tooltip/>

      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>

    </div>
    <void-remaining-balance ref="voidRemainingBalance"></void-remaining-balance>
  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import VoidRemainingBalance from "@/views/letterReview/letterReview/components/VoidRemainingBalance.vue";
import * as letterReviewApi from "@/api/letterReview/letterReview";

export default {
  name: "NoCreditRecord",
  components: {
    SearchContent,
    VoidRemainingBalance
  },
  dicts: [
    'business_type',
    'customer_type',
    'customer_level',
    'rental_purpose',
    'customer_label',
    'customer_property',
    'business_yes_no',
    'credit_review_status',
    'clues_source'
  ],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerName: null,
        businessType: null,
        customerType: null,
        leasePurpose: null,
        customerSource: null,
        customer_level: null,
        clientProperty: null,
        areYouALoyalCustomer: null,
        clueClassification: null,
        orderNo: null,
        submitter: null,
        supplemented: null,
        submitTimeStart: null,
        submitTimeEnd: null,
        auditPerson: null,
        auditTimeStart: null,
        auditTimeEnd: null,
        passStatus: null,
        applicationNo: null,
        creditReviewStatus: null,
        priceTimeStart: null,
        priceTimeEnd: null,
        carInfo: null,
        needCreditReview: 1,
      },
      priceTimes: [],
      total: 0,
      dataList: [],
      statisticsInfo: {},
      //非合并列字段集合
      unMergeArr: [
        'applicationType',
        'carNo',
        'vehicleModel',
        'vehicleStyle',
        'purchasePrice',
        'currentValuation',
        'vehicleManufacturers',
        'leaseTerm',
        'rentPaymentMethod',
        'vehicleEnergyType',
        'registrationNature',
        'mileageLimit',
        'registeredCity',
        'numberOfApplications',
        'numberOfUnitsPassed',
        'rejectedUnits',
        'numberOfUnitsUsed',
        'numberOfInvalidUnits',
        'numberOfFrozenUnits',
        'numberOfRemainingUnits',
        'effectiveStatus',
        'margin',
        'monthlyRent',
        'firstInstallmentRentalRatio',
        'residualValueRatio'
      ]

    };
  },
  mounted() {
    this.getList()
    this.getStatistics()

  },
  activated() {
    this.handleQuery()
  },
  methods: {

    changePriceTimes(val) {
      this.queryParams.priceTimeStart = val[0]
      this.queryParams.priceTimeEnd = val[1]
    },

    /** 查询测试单表列表 */
    getList() {
      this.loading = true;
      letterReviewApi.notCreditReviewList(this.queryParams).then(res => {
        this.dataList = res.rows;
        this.total = res.total;
        this.setrowspans(this.dataList)

      }).finally(() => {
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs?.queryForm?.resetFields();
      this.queryParams.priceTimeStart = null
      this.queryParams.priceTimeEnd = null
      this.priceTimes = []
      this.handleQuery();
    },

    // 相关按钮的点击事件
    handleOperate(type, row) {
      switch (type) {//按钮类型

        case 11://查看
          this._toPage({
            name: 'LetterReviewDetail',
            query: {
              applicationNo: row.applicationNo
            }
          })
          break
        case 12://作废剩余额度
          this.$refs.voidRemainingBalance.show(row.applicationNo)
          break
      }
    },
    //查看额度申请详情
    goQurtaApplyDetail(row) {
      if (this.checkPermi(['quota:apply:list:look'])) {
        this._toPage({
          name: 'ApplyDetails',
          query: {
            calcSchemeId: row.calcSchemeId
          }
        })
      } else {
        this.$message.warning('无权限')
      }
    },

    // 合并相同编号行
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (!this.unMergeArr.includes(column.property)) {
        return {
          rowspan: row.rowspan,
          colspan: row.rowspan > 0 ? 1 : 0
        }
      }
    },
    // 计算每行数据需要合并的行rowspan，在表格数据更新后进行调用
    setrowspans(list) {
      list.forEach(v => {
        v.rowspan = 1
      })
      // 双层循环
      for (let i = 0; i < list.length; i++) {
        /**
         * 内层循环，上面已经给所有的行都加了v.rowspan = 1
         * 如果当前行的purchaseNo和下一行的purchaseNo相等
         * 就把当前v.rowspan + 1
         * 下一行的v.rowspan - 1
         */
        for (let j = i + 1; j < list.length; j++) {
          // 此处可根据相同字段进行合并，此处是根据的purchaseNo，实际情况根据业务需要修改
          if (list[i].applicationNo === list[j].applicationNo) {
            list[i].rowspan++
            list[j].rowspan--
          } else {
            break
          }
        }
        // 这里跳过已经合并的行数据，从下一次需要合并的行开始
        i = i + list[i].rowspan - 1
      }
    },
    /** 导出操作 */
    handleExport() {
      this.download('/creditReview/creditReview/export', this.queryParams, `免信审管理_${new Date().getTime()}.xlsx`)
    },
    // 信审记录统计
    getStatistics() {
      letterReviewApi.noCreditStatistics(this.queryParams).then(res => {
        this.statisticsInfo = res.data;
      })
    },

  }
};
</script>

<style lang="scss" scoped>
.statisticsInfo {
  font-size: 14px;
  color: #464646;
  margin-right: 16px;

  span {
    white-space: nowrap;
  }

  .countInfo {
    margin-left: 3px;
    color: #1890FF;
  }
}
</style>
